<template>
  <div class="list">
   <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/menu' }">方案库</el-breadcrumb-item></el-breadcrumb><search-add btnName='新增方案' @add-link="addpro" class="serarchadd"></search-add>
   <!-- <div class="search">
         <span class="lable">协议方式:</span><el-select v-model="target" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
    </div> -->
    <div class="main">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item,index) in lists" :key="index">
          <el-card :body-style="{ padding: '8px' }"><div class="bottom-right" @click="toDetail(item)">
            <div class="content-div">
              <el-row :gutter="20" v-if="item.children.length<=9">
                <el-col :span="8" v-for="(item,index) in item.children" :key="index">
                  <div class="grid-content bg-purple clearfix">
                    <img :src="item.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.image.storeId" height="30" width="30" @error="imgError(item.image)" style="z-index:999;">
                  <!--   <div class="picture"><img class="item-pic"  alt=""></div> -->
                    <p style="font-size:5px;">{{item.name}}</p>
                  </div>
                </el-col>
              </el-row>
                <el-row :gutter="20" v-if="item.children.length>9">
                <el-col :span="6" v-for="(item,index) in item.children" :key="index">
                  <div class="grid-content bg-purple clearfix">
                    <img :src="item.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.image.storeId" height="30" width="30" @error="imgError(item.image)" style="z-index:999;">
                  <!--   <div class="picture"><img class="item-pic"  alt=""></div> -->
                    <p style="font-size:5px;">{{item.name}}</p>
                  </div>
                </el-col>
              </el-row>
             </div>
          </div>
            <div style="padding: 14px;">
              <span>{{item.displayname}}</span><el-button type="text"  class="button">{{item.name}}</el-button>
             
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[6, 8, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        class="pagelist"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import searchAdd from "@/components/searchAdd";
import {getSchemePage} from "@/api/prolist"
export default {
  name: "list",
  components: {
    searchAdd
  },
  data() {
    return {
      name: "后台页面",
      msg: "",
      currentPage: 1,
      pageSize:6,
      target:"",
      total:0,
      options: [
        {
          value: "地图链接",
          label: "地图链接"
        },
        {
          value: "平台链接",
          label: "平台链接"
        },
        {
          value: "外部链接",
          label: "外部链接"
        }
      ],
      picsrc:require("../../assets/img/zdrygl.png"),
      lists: [
        {
          piclist: [
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          }
        ],
          name: "重点人管控平台",
          pro: "潍坊项目"
        },
        {
          piclist: [
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          }
        ],
          name: "重点人管控平台",
          pro: "潍坊项目"
        },
        {
          piclist: [
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          }
        ],
          name: "重点人管控平台",
          pro: "潍坊项目"
        },
        {
          piclist: [
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          }
        ],
          name: "重点人管控平台",
          pro: "潍坊项目"
        }
      ]
    };
  },
  mounted(){
    this.getScheme(this.pageSize,this.currentPage)
  },
  methods: {
    imgError(item) {
      if(item.storeId){
					item.image.storeId = require('../../assets/img/shzats.png');
				}
    },
    addpro() {
      //this.$router.push("/menu/add");
      this.$router.push({name:"新增菜单",params:{menu: {
							name: "新增方案",
							txt: "New"
						}}})
    },
    handleSizeChange(val) {
      this.pageSize=val;
      this.getScheme(this.pageSize,this.currentPage);
      console.log(`每页 ${val} 条`);
    },
    toDetail(item){
      this.$router.push({name:"方案详情之方案预览图",params:{list:item}})
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.getScheme(this.pageSize,this.currentPage);
      console.log(`当前页: ${val}`);
    },
    getScheme(pageSize,pagecur){
      let pagelist={
        pageNum: pagecur,
        pageSize: pageSize
      }
      getSchemePage(pagelist).then(res=>{
        console.log(res);
        var listis=res.data.data
        listis.forEach(item=>{
         
          if(item.children==null){
            item.children=[];
          }
          return item.children
        })
        console.log(listis);
        this.lists=listis
        this.total=res.data.elementsSum;
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" lang="scss" scoped>
.list {
  .button {
    float: right;
  }
  .serarchadd{
    padding: 10px 0px;
  }
  .bottom-right{
          width: 100%;
          height: 380px;
          background-image: url(../../assets/img/bg2.png);
          background-size: 100% 100%;
          background-color: #002543;
          color: #D5D8DF;
  .content-div {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    padding-top: 10px;
    .el-row {
      margin-top: 20px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 120px;
      background-image: url(../../assets/img/kuang-shzats.png);
      background-size: 100% 100%;
      overflow: hidden;

      img {
        display: block;
        margin: 0 auto;
        //margin-left: -45px;
        padding-left: 100px;
        padding-top: 20px;
        padding-bottom: 10px;
        filter: drop-shadow(-65px 0 #93c4ff);
      }
      p {
        font-size: 0.5em!important;
        text-align: center;
      }
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
  }
}
</style>